﻿@page "/Numeric-TextBox/Range-Validation"

@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the range validation functionalities of the Numeric TextBox. Change the Min, Max and Step values and click on apply button to change the property values in Numeric TextBox.</p>
</SampleDescription>
<ActionDescription>
   <p>The NumericTextBox has the options to restrict the input value between a specific range using the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxModel-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxModel_1_Min' target='_blank'> Min</a>, <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxModel-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxModel_1_Max' target='_blank'> Max</a>, and <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxModel-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxModel_1_StrictMode' target='_blank'> StrictMode</a> properties.</p>
   <p>When you enable the StrictMode property, the value will automatically change within a range on passing the out-of-range values. When you disable the StrictMode property, the NumericTextBox component allows the out-of-range value with the highlighted textbox to indicate the given value is wrong.</p>
   <p>In this demo, numeric textbox is restricted between 10 to 100 through the Min and Max properties. So you can enter only the value between this range.</p>
   <p> More information about NumericTextBox can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started/#range-validation'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section col-lg-12 range">
    <div class="col-lg-8">
        <div class="content rangevalidation">
            <div class="control-label">
                Numeric TextBox
            </div>
            <SfNumericTextBox TValue="double?" Min="@setMin" Max="@setMax" Value=15 Step=@setIncrement></SfNumericTextBox>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="content property-section">
            <div class="property">Properties</div>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <div class="selectionText">Min Value </div>
                        </td>
                        <td>
                            <div>
                                <SfNumericTextBox TValue="double?" Format="n0" @bind-Value="@minValue"></SfNumericTextBox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="selectionText">Max Value </div>
                        </td>
                        <td>
                            <div>
                                <SfNumericTextBox TValue="double?" Width="100%" Format="n0" @bind-Value="@maxValue"></SfNumericTextBox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="selectionText">Increment step </div>
                        </td>
                        <td>
                            <div>
                                <SfNumericTextBox TValue="double?" Min="@stepMin" Width="100%" Format="n0" @bind-Value="@stepValue"></SfNumericTextBox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <button class="e-btn apply-limit" @onclick="@ApplyRange">Apply</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{

    private double? setMin { get; set; } = 10;

    private double? setMax { get; set; } = 100;

    private double? setIncrement { get; set; } = 1;

    private double? stepMin { get; set; } = 1;

    private double? minValue = 10;

    private double? maxValue = 100;

    private double? stepValue = 1;

    public void ApplyRange(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        setMin = minValue;
        setMax = maxValue;
        setIncrement = (stepValue == null) ? 1 : stepValue;
    }
}

<style>
    .control-section.range {
        margin-top: 20px;
    }

    .rangevalidation {
        width: 55%;
        margin-left: 80px;
    }

    .selectionText {
        margin: 10px;
        width: 100px;
    }

    .apply-limit {
        margin-top: 10px;
    }

    .control-label {
        padding: 24px 0px 10px 0px;
        font-size: 12px;
    }

    .property {
        padding-left: 10px;
        padding-bottom: 20px;
        font-weight: 600;
        font-size: 15px;
    }
</style>